<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">事件处置</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>添加实例</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询区域 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="行业">
                <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择行业" clearable>
                    <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="流程类别">
                <el-select @change="getForms" v-model="formInline.CategoryCode" placeholder="请选择类别" clearable>
                    <el-option v-for="item in categorys" :label="item.formCategoryName"
                        :value="item.formCategoryCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="流程表单">
                <el-select @change="GetFormFields()" v-model="formInline.FormId" placeholder="请选择流程表单" clearable>
                    <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="GetFormFields()">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">


        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="width:1200px">


            <template v-for="field in formFields" style="width:900px">

                <el-form-item v-if="field.fieldComponent == 1" :label="field.fieldDes" style="width:300px">
                    <el-input v-model="field.fieldValue" placeholder="" clearable />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 2" :label="field.fieldDes" style="width:300px">
                    <el-date-picker v-model="field.fieldValue" type="date" placeholder="Pick a date" clearable />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 3" :label="field.fieldDes" style="width:300px">
                    <el-input v-model="field.fieldValue" placeholder="" show-password width="280" clearable />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 4" :label="field.fieldDes" style="width:300px">
                    <el-select v-model="field.fieldValue" :placeholder="'请选择' + field.fieldDes" clearable>
                        <el-option v-for="item in JSON.parse(field.fieldOptions) " width="280" :label="item.value"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item v-if="field.fieldComponent == 5" :label="field.fieldDes" style="width:300px">
                    <el-radio-group v-model="field.fieldValue">
                        <el-radio v-for="item in JSON.parse(field.fieldOptions)" :value="item.value">{{ item.value
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-form-item v-if="field.fieldComponent == 7" :label="field.fieldDes" width="280">
                    <el-checkbox-group :v-model="JSON.parse(field.fieldValue||'[]')">
                            <el-checkbox v-for="item in JSON.parse(field.fieldOptions)"  :value="item.value" name="type">
                            {{ item. value}}
                            </el-checkbox> 
                            </el-checkbox-group>
              </el-form-item>  -->

                <el-form-item v-if="field.fieldComponent == 8" :label="field.fieldDes" style="width:300px">


                    <el-input v-model="field.fieldValue" type="textarea" />
                </el-form-item>

            </template>
            <br>
            <el-button type="primary" @click="submit()">提交</el-button>

        </el-form>


    </div>
    {{ formFields }}

</template>


<script lang="ts" setup>
import myAxios from '@/http/axiosHelper';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

import { useCounterStore } from '@/stores/counter';

const pinia = useCounterStore()

const formInline = reactive({
    IndustryId: null,
    CategoryCode: '',
    FormId: null,
})

const industrys = ref([{
    "id": 1,
    "industryName": "行政"
}])//行业列表的数据源
const getIndustrys = () => {//获取行业列表的数据源
    myAxios.get('/PERead/ProcessEngine/GetIndustry', { params: {} }).then(res => {
        industrys.value = res.data.data
    })
}


const categorys = ref([])

const getCategorys = () => {
    myAxios.get('/PERead/ProcessEngine/SearchFormCategory', { params: { IndustryId: formInline.IndustryId } }).then(res => {
        categorys.value = res.data.data
    })
    formInline.CategoryCode = ''
}

const forms = ref([])
const getForms = () => {
    myAxios.get('/PERead/ProcessEngine/GetFormPages', {
        params: {
            PageIndex: 1,
            PageSize: 10000,
            CategoryCode: formInline.CategoryCode
        }
    }).then(res => {
        forms.value = res.data.pageDatas
        formInline.FormId = null
    })
}

const formFields = ref([{ "id": 703903508824069, "formId": 702835120816133, "fieldName": "StudentName", "fieldDes": "学生姓名", "fieldType": 1, "fieldComponent": 1, "fieldValue": "许天佑", "fieldOptions": "[]" }])
const GetFormFields = () => {
    myAxios.get('/PERead/ProcessEngine/GetFormFields', { params: { FormId: formInline.FormId } }).then(res => {
        formFields.value = res.data.data
    })
}

const submit = () => {
    myAxios.post('/PEWrite/Instance/CreateInstance', {
        "formId": formInline.FormId,
        "formContent": JSON.stringify(formFields.value),
        "starterName": pinia.loginDto.accountName
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
        } else {
            ElMessage.error(res.data.msg);
        }
    })


}
onMounted(() => {
    getIndustrys()
})
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>